<template>
  <div>
    <h2>登录表单</h2>
    <forms>
      <label for="username">用户名:</label>
      <input type="text" id="username" v-model="username" required />
      <br />
      <label for="password">密码:</label>
      <input type="password" id="password" v-model="password" required />
      <br />
      <input type="checkbox" id="agree" v-model="agree" />
      <label for="agree">我同意相关协议</label>
      <br />
      <Button type="primary" @click="handleSubmit">提交</Button>
    </forms>
    <pre>{{ response }}</pre>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Button } from 'vant'


const username = ref('');
const password = ref('');
const agree = ref(false);
const response = ref('');

const handleSubmit = () => {
  if (!agree.value) {
    return;
  }

  const xhr = new XMLHttpRequest();
  const url = 'https://apifoxmock.com/m1/4840030-4495188-default/login/password';
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-Type', 'application/json');

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const result = JSON.parse(xhr.responseText);
      response.value = JSON.stringify(result, null, 2);
      console.log(result);
    } else if (xhr.readyState === 4) {
      response.value = '登录失败，请检查您的网络或输入的信息';
      console.error('登录失败:', xhr.responseText);
    }
  };

  const data = JSON.stringify({
    username: username.value,
    password: password.value
  });

  xhr.send(data);
};
</script>

<style scoped>
/* 根据需要添加样式 */
form {
  display: flex;
  flex-direction: column;
}
label, input, button {
  margin-bottom: 10px;
}
</style>